<template>
	<view class="claim-order-collage-detail" v-if="detail.id">
		<view class="mg-md">
			<view class="collage-item flex-center pd-lg fill-base radius-16">
				<image mode="aspectFill" lazy-load class="cover radius-10" :src="detail.claim_cover"></image>
				<view class="flex-1 ml-md">
					<view class="f-title c-title text-bold ellipsis">{{detail.claim_title}}</view>
					<view class="flex-y-center f-desc c-warning mt-sm">众筹价<view class="flex-y-baseline f-caption ml-sm">
							¥<view class="f-sm-title text-bold">{{detail.price}}</view>
						</view>
						<view class="f-icontext c-caption text-delete ml-sm">原价 ¥{{detail.claim_price}}</view>
					</view>
					<view class="flex-center mt-md">
						<view class="collage-tag flex-center f-caption c-base" :style="{background:primaryColor}">
							{{detail.success_num}}人团
						</view>
						<view class="flex-1"></view>
					</view>
				</view>
			</view>
			<view class="mt-md pd-lg flex-center flex-column fill-base radius-16">
				<view class="space-md"></view>
				<view class="flex-center">
					<image lazy-load class="tag-img mr-lg" src="/static/image/farm/tag.png"></image>
					<view class="f-md-title text-bold" :style="{color:primaryColor}">
						{{detail.status==1?`还差${detail.surplus_num}人, 成团立享超值优惠`:statusType[detail.status].title}}
					</view>
					<image lazy-load class="tag-img ml-lg" src="/static/image/farm/tag.png"></image>
				</view>
				<block v-if="detail.status==1">
					<view class="user-list flex-center mt-lg mb-md">
						<block v-for="(item,index) in detail.user_list" :key="index">
							<image class="avatar radius" :src="item"
								v-if="index< detail.success_num > 4 ? 4 : detail.success_num - 1"></image>
						</block>
						<block v-if="detail.surplus_num">
							<view class="avatar flex-center radius" v-for="(item,index) in detail.more_num"
								:key="index"><i class="iconfont icon-add"></i>
							</view>
						</block>
					</view>
					<view class="flex-y-center mt-lg mb-lg" :style="{color:primaryColor}">
						<min-countdown :type="2" :targetTime="detail.end_time * 1000" color="#333" textColor="#999"
							bgColor="#F7F7F7" className="sm" @callback="countEnd">
						</min-countdown>
					</view>
					<view class="f-desc c-caption">还差{{detail.surplus_num}}人成团，距离结束还剩</view>
					<view class="space-lg"></view>
				</block>
				<view class="collage-status-icon iconfont icon-biaoqian flex-center"
					:style="{color:detail.status==2?primaryColor:'#E82F21'}" v-else>
					<view class="f-md-title text-bold abs">{{statusType[detail.status].text}}</view>
				</view>
				<block v-if="detail.status == 1 && !detail.can_join">
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="clear-btn share-btn flex-center f-sm-title"
						:style="{background:primaryColor}">
						邀请好友
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view @click="toAppShare" class="share-btn flex-center f-sm-title"
						:style="{background:primaryColor}">
						邀请好友
					</view>
					<!-- #endif -->
				</block>

				<view @click="toOrder" class="share-btn flex-center f-sm-title" :style="{background:primaryColor}"
					v-if="(detail.status == 1 && detail.can_join) || (detail.status>1 && detail.can_start)">
					{{detail.status==1 ? '立即参与' : '再开一团'}}
				</view>
				<view class="space-lg"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				detail: {},
				statusType: {
					2: {
						title: '众筹活动已人满成功',
						text: '众筹成功'
					},
					3: {
						title: '众筹超时失败',
						text: '众筹失败'
					}
				}
			}
		},
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo
		}),
		methods: {
			...mapActions(['']),
			async initIndex() {
				let {
					id
				} = this.options
				let data = await this.$api.claim.claimCollageInfo({
					id
				})
				let {
					success_num,
					user_list
				} = data
				let len = user_list.length
				data.more_num = len > 3 ? 1 : success_num > 4 ? 5 - len : success_num - len
				this.detail = data
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex()
			},
			countEnd() {
				this.$util.log("倒计时完了")
				setTimeout(() => {
					this.initRefresh()
				}, 1000)
			},
			toAppShare() {
				// #ifdef APP-PLUS
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#/user/pages/coupon/share?coupon_atv_id=${id}&pid=${pid}`
				let scene = type == 1 ? 'WXSceneSession' : 'WXSceneTimeline'
				uni.share({
					provider: "weixin",
					scene,
					type: 0,
					href,
					title,
					summary,
					imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
			},
			toOrder() {
				let {
					id,
					atv_id,
					claim_id,
					status
				} = this.detail
				let type = status == 1 ? 2 : 1
				let cid = type == 1 ? atv_id : id
				let url = `/claim/pages/order?id=${claim_id}&cid=${cid}&type=${type}`
				this.$util.goUrl({
					url
				})
			}
		}
	}
</script>


<style lang="scss">
	.claim-order-collage-detail {

		.collage-item {

			.cover {
				width: 180rpx;
				height: 170rpx;
			}

			.ellipsis {
				max-width: 450rpx;
			}

			.collage-tag {
				height: 36rpx;
				padding: 0 10rpx;
			}
		}

		.tag-img {
			width: 26rpx;
			height: 24rpx;
		}

		.collage-status-icon {
			width: 210rpx;
			height: 200rpx;
			font-size: 200rpx;
			margin: 50rpx auto;

			.text-bold {
				height: 40rpx;
				transform: rotate(-32deg);
			}
		}

		.user-list {

			.avatar {
				width: 92rpx;
				height: 92rpx;
				margin: 0 17rpx;

				.icon-add {
					color: #D8D8D7
				}
			}

			.avatar.flex-center {
				background: #F8F8F8;
				border: 1px solid #DBDBDB;
			}
		}

		.share-btn {
			width: 590rpx;
			height: 90rpx;
			color: #fff;
			border-radius: 100rpx;
		}
	}
</style>
